<template>
  <div style="margin-top: 20px; width: 1000px; background-color: #fff; font-size: 12px; display: flex; flex-direction: row;">
    <div class="left">
      订单号: {{ orderDetailId }}
      <h3 style="font-size: 24px; color: #71b247; margin-top: 30px; font-weight: 700;">
        完成
      </h3>
      <el-button
        class="button"
        @click="this.$router.push({path: '/commodity/comment', query: {id: orderDetailId}})"
      >
        评价
      </el-button>
    </div>
    <div class="right">
      <el-steps
        :active="logisticsState"
        style="width: calc(1000px - 325px); --el-color-primary: #3271ae;"
      >
        <el-step
          title="提交订单"
          icon="Edit"
        />
        <el-step
          title="付款成功"
          icon="Postcard"
        />
        <el-step
          title="商品出库"
          icon="Box"
        />
        <el-step
          title="等待收货"
          icon="Van"
        />
        <el-step
          title="完成"
          icon="DocumentChecked"
        />
      </el-steps>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderDetailId: Number,
    logisticsState: Number,
  },
};
</script>

<style scoped>
.left {
  width: 325px;
  border-right: 1px solid #f1f1f1;
  color: #999;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.button {
  --el-border-color: #3271ae;
  --el-text-color-regular: #3271ae;
  margin-top: 30px;
  width: 100px;
}
.right {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 675px;
  padding: 20px;
}
</style>